import {  Button } from "antd-mobile";
import { useLocation, useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import mm from '../../assets/条形码.png'
function Index() {
  const nav = useNavigate();
  const location = useLocation();
  const [orderDetail, setOrderDetail] = useState<any>(null);

  type OrderDetail = {
    registrationNumber: string;
    patientName: string;
    department: string;
    doctorName: string;
    prescriptionTime: string;
    orderNumber: string;
    orderTransactionNumber: string;
    orderAmount: number;
    orderStatus: string;
    paymentMethod: string;
    orderTime: string;
    paymentTime: string;
    medicines: Array<{
      name: string;
      quantity: string;
      price: number;
    }>;
    examinations: Array<{
      name: string;
      price: number;
    }>;
    prescriptionNumber: string;
    examinationNumber: string;
  }

  const handleBack = () => {
    nav(-1);
  };

  // const handleMoreOptions = () => {
  //   console.log('更多选项');
  // };

  // const handleTarget = () => {
  //   console.log('目标功能');
  // };

  const handleCopyOrderNumber = () => {
    if (orderDetail) {
      navigator.clipboard.writeText(orderDetail.orderNumber);
      alert('订单号已复制到剪贴板');
    }
  };

  useEffect(() => {
    // 读取来自 zhi 页的订单或本地缓存
    const stateOrder = (location.state as any)?.order;
    const paymentMethodFromState = (location.state as any)?.paymentMethod;
    let pending = stateOrder;
    if (!pending) {
      try {
        const raw = localStorage.getItem('danPendingOrder');
        if (raw) pending = JSON.parse(raw);
      } catch {}
    }

    if (pending) {
      const medicines = (pending.items || []).map((it: any, idx: number) => ({
        name: it.name,
        quantity: `*${it.qty}`,
        price: Number((it.qty * it.price).toFixed(2)),
      }));
      const mockOrderDetail: OrderDetail = {
        registrationNumber: '20200101001598Z',
        patientName: '王小柯',
        department: '门诊外一科',
        doctorName: '刘医师',
        prescriptionTime: new Date(pending.createdAt || Date.now()).toLocaleString(),
        orderNumber: pending.orderNo || 'D0000000000',
        orderTransactionNumber: `T${pending.orderNo || Date.now()}`,
        orderAmount: pending.amount || 0,
        orderStatus: '已支付',
        paymentMethod: paymentMethodFromState === 'insurance' ? '医保支付' : '自费支付',
        orderTime: new Date(pending.createdAt || Date.now()).toLocaleString(),
        paymentTime: new Date().toLocaleString(),
        medicines,
        examinations: [],
        prescriptionNumber: 'RX' + String(Date.now()).slice(-6),
        examinationNumber: 'EX' + String(Date.now()).slice(-6),
      };
      setOrderDetail(mockOrderDetail);
      try { localStorage.removeItem('danPendingOrder'); } catch {}
      return;
    }

    // 兜底：保持原有示例
    const mockOrderDetail: OrderDetail = {
      registrationNumber: '20200101001598Z',
      patientName: '王小柯',
      department: '门诊外一科',
      doctorName: '刘医师',
      prescriptionTime: '2020-01-01 10:20:36',
      orderNumber: '2021010156256894',
      orderTransactionNumber: '400012021010156256894',
      orderAmount: 520.13,
      orderStatus: '已支付',
      paymentMethod: '微信支付',
      orderTime: '2020-01-01 10:23:36',
      paymentTime: '2020-01-01 10:25:10',
      medicines: [
        { name: '葆宫止血颗粒', quantity: '*3盒', price: 50.13 },
        { name: '维生素B1', quantity: '*2瓶', price: 20.00 },
        { name: '维生素B2', quantity: '*2瓶', price: 10.00 },
        { name: '维生素E', quantity: '*2瓶', price: 10.00 },
        { name: '维生素C', quantity: '*2瓶', price: 10.00 }
      ],
      examinations: [
        { name: 'CT', price: 200.00 },
        { name: '上腹部CT平扫', price: 220.00 }
      ],
      prescriptionNumber: '20200101032',
      examinationNumber: '20200101133'
    };
    setOrderDetail(mockOrderDetail);
  }, [location.state]);

  return (
    <div style={{ width: '100vw', minHeight: '100vh', background: '#f5f5f5' }}>
      {/* 顶部导航栏 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
      
        justifyContent: 'space-between',
        padding: '12px 16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div 
            onClick={handleBack}
            style={{ 
              fontSize: '20px', 
              cursor: 'pointer',
              color: '#333'
            }}
          >
            ‹
          </div>
          <div style={{ fontSize: '18px', fontWeight: 600, color: '#333' }}>
         缴费订单详情
          </div>
        </div>
     
      </div>

      {/* 支付状态 */}
      <div style={{
        background: '#fff',
        padding: '20px 16px',
        textAlign: 'center',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: '12px',
        }}>
          <div style={{
            width: '40px',
            height: '40px',
            borderRadius: '50%',
            background: '#52c41a',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: '#fff',
            fontSize: '20px'
          }}>
            ✓
          </div>
          <div style={{
            fontSize: '18px',
            fontWeight: 600,
            color: '#333',
            
          }}>
            已缴费
          </div>
        </div>
      </div>

      {/* 条形码区域 */}
      <div style={{
        background: '#fff',
        padding: '20px 16px',
        textAlign: 'center',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{
          width: '200px',
          height: '80px',
          background: '#000',
          margin: '0 auto 12px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: '#fff',
          fontSize: '12px'
        }}>
          {/* 条形码 */}
          <img src={mm} alt="" />
        </div>
        <div style={{
          fontSize: '16px',
          fontWeight: 600,
          color: '#333',
          marginBottom: '8px'
        }}>
          {orderDetail?.registrationNumber}
        </div>
        <div style={{
          fontSize: '14px',
          color: '#999'
        }}>
          取药或检查时请出示此码
        </div>
      </div>

      {/* 缴费信息卡片 */}
      {orderDetail && (
        <div style={{
          margin: '16px',
          background: '#fff',
          borderRadius: '12px',
          padding: '16px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
        }}>
          <div style={{ 
            fontSize: '16px', 
            fontWeight: 600, 
            color: '#333',
            marginBottom: '16px'
          }}>
            缴费信息
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>登记号:</span>
            <span style={{ fontSize: '14px', color: '#333', fontWeight: 500 }}>
              {orderDetail.registrationNumber}
            </span>
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>就诊人:</span>
            <span style={{ fontSize: '14px', color: '#333', fontWeight: 500 }}>
              {orderDetail.patientName}
            </span>
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>就诊科室:</span>
            <span style={{ fontSize: '14px', color: '#333', fontWeight: 500 }}>
              {orderDetail.department}
            </span>
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>开单医生:</span>
            <span style={{ fontSize: '14px', color: '#333', fontWeight: 500 }}>
              {orderDetail.doctorName}
            </span>
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>开单时间:</span>
            <span style={{ fontSize: '14px', color: '#333', fontWeight: 500 }}>
              {orderDetail.prescriptionTime}
            </span>
          </div>
        </div>
      )}

      {/* 费用明细卡片 */}
      {orderDetail && (
        <div style={{
          margin: '0 16px 16px',
          background: '#fff',
          borderRadius: '12px',
          padding: '16px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
        }}>
          <div style={{ 
            fontSize: '16px', 
            fontWeight: 600, 
            color: '#333',
            marginBottom: '16px'
          }}>
            费用明细
          </div>
          
          {/* 取药提示 */}
          <div style={{
            background: '#e6f7ff',
            padding: '12px',
            borderRadius: '8px',
            marginBottom: '16px',
            fontSize: '14px',
            color: '#1677ff'
          }}>
            请前往一楼门诊药房2号窗口取药
          </div>
          
          {/* 药品明细 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              marginBottom: '12px'
            }}>
              <span style={{
                background: '#1677ff',
                color: '#fff',
                padding: '2px 6px',
                borderRadius: '4px',
                fontSize: '12px'
              }}>
                药
              </span>
              <span style={{ fontSize: '14px', color: '#333' }}>
                处方号 ({orderDetail.prescriptionNumber})
              </span>
            </div>
            
            {orderDetail.medicines.map((medicine, index) => (
              <div key={index} style={{
                display: 'flex',
                justifyContent: 'space-between',
                marginBottom: '8px',
                fontSize: '14px'
              }}>
                <span style={{ color: '#333' }}>
                  {index + 1}、{medicine.name}{medicine.quantity}
                </span>
                <span style={{ color: '#333', fontWeight: 500 }}>
                  ¥{medicine.price.toFixed(2)}
                </span>
              </div>
            ))}
          </div>
          
          {/* 检查提示 */}
          <div style={{
            background: '#fffbe6',
            padding: '12px',
            borderRadius: '8px',
            marginBottom: '16px',
            fontSize: '14px',
            color: '#d48806'
          }}>
            请前往门诊三楼放射科进行检查
          </div>
          
          {/* 检查明细 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              marginBottom: '12px'
            }}>
              <span style={{
                background: '#faad14',
                color: '#fff',
                padding: '2px 6px',
                borderRadius: '4px',
                fontSize: '12px'
              }}>
                查
              </span>
              <span style={{ fontSize: '14px', color: '#333' }}>
                检查单号 ({orderDetail.examinationNumber})
              </span>
            </div>
            
            {orderDetail.examinations.map((exam, index) => (
              <div key={index} style={{
                display: 'flex',
                justifyContent: 'space-between',
                marginBottom: '8px',
                fontSize: '14px'
              }}>
                <span style={{ color: '#333' }}>
                  {index + 1}、{exam.name}
                </span>
                <span style={{ color: '#333', fontWeight: 500 }}>
                  ¥{exam.price.toFixed(2)}
                </span>
              </div>
            ))}
          </div>
          
          {/* 合计 */}
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            paddingTop: '12px',
            borderTop: '1px solid #f0f0f0',
            fontSize: '16px',
            fontWeight: 600,
            color: '#333'
          }}>
            <span>合计:</span>
            <span>¥{orderDetail.orderAmount.toFixed(2)}</span>
          </div>
        </div>
      )}

      {/* 订单信息卡片 */}
      {orderDetail && (
        <div style={{
          margin: '0 16px 16px',
          background: '#fff',
          borderRadius: '12px',
          padding: '16px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
        }}>
          <div style={{ 
            fontSize: '16px', 
            fontWeight: 600, 
            color: '#333',
            marginBottom: '16px'
          }}>
            订单信息
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>订单号:</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '14px', color: '#333', fontWeight: 500 }}>
                {orderDetail.orderNumber}
              </span>
              <Button
                size="mini"
                color="primary"
                onClick={handleCopyOrderNumber}
                style={{
                  padding: '2px 8px',
                  fontSize: '12px',
                  height: '24px'
                }}
              >
                复制
              </Button>
            </div>
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>订单流水号:</span>
            <span style={{ fontSize: '14px', color: '#333', fontWeight: 500 }}>
              {orderDetail.orderTransactionNumber}
            </span>
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>订单金额:</span>
            <span style={{ fontSize: '14px', color: '#333', fontWeight: 500 }}>
              ¥{orderDetail.orderAmount.toFixed(2)}
            </span>
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>订单状态:</span>
            <span style={{ fontSize: '14px', color: '#52c41a', fontWeight: 500 }}>
              {orderDetail.orderStatus}
            </span>
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>支付方式:</span>
            <span style={{ fontSize: '14px', color: '#333', fontWeight: 500 }}>
              {orderDetail.paymentMethod}
            </span>
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '12px' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>下单时间:</span>
            <span style={{ fontSize: '14px', color: '#333', fontWeight: 500 }}>
              {orderDetail.orderTime}
            </span>
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ fontSize: '14px', color: '#999' }}>支付时间:</span>
            <span style={{ fontSize: '14px', color: '#333', fontWeight: 500 }}>
              {orderDetail.paymentTime}
            </span>
          </div>
        </div>
      )}
   </div>
  );
}

export default Index;
